/*
 * @Author: lujing
 * @Date: 2024-06-13 09:29:14
 * @LastEditTime: 2024-06-24 09:11:53
 * @FilePath: \workspace\fy\aiDigitalPerson\dipu-xjy-meta-digital-person\src\components\digital\DigtalButton.tsx
 */
import { Box } from '@mui/material';
import {
    loadingState,
    voicingState
  } from 'state/chat';
import { useRecoilValue } from 'recoil';
import { useState } from 'react';
import voiceDefaultIcon from 'assets/video-default.png';
import voiceActiveIcon from 'assets/video-active.png';
import voiceDeActiveIcon from 'assets/video-disabled.png';

export default function DigitalButton() {
    const loading = useRecoilValue(loadingState)
    const voicing = useRecoilValue(voicingState)
    return (
        <Box sx={{
            position:'absolute',
            bottom:'-50px',
            display: 'flex',
            width:'100%',
            justifyContent: 'center',
            alignItems: 'center',
            // paddingTop: '20px',
            paddingBottom: '20px',
            zIndex:5,
            // border:'1px solid red',
            // height: '5rem'
        }}>
            {/* banned */}
           
           {/* <span style={{color:'#fff'}}>== {voicing}==</span> */}
            {/* {loading ? (<img style={{width: '5rem'}} src={voiceDeActiveIcon} />) : (voicing === 'event_vad_begin' || voicing === 'event_vad_end')  ? (<img style={{width: '5rem'}} src={voiceActiveIcon} />) : (<img style={{width: '5rem'}} src={voiceDefaultIcon} />)} */}
            {/* voiceActiveIcon:说话中，event_vad_end：等待  event_vad_think:思考 */}
            {voicing === 'event_vad_begin'? (<img style={{width: '5rem'}} src={voiceActiveIcon} />) : (voicing === 'event_vad_think'?(<img style={{width: '5rem'}} src={voiceDeActiveIcon} />):(<img style={{width: '5rem'}} src={voiceDefaultIcon} />))}
           
            {/* { (loading) && (<img style={{width: '5rem'}} src={voiceDeActiveIcon} />)}
            { !loading && voicing === 'event_vad_end' && (<img style={{width: '5rem'}} src={voiceDefaultIcon} />)}
            { !loading && voicing === 'event_vad_begin' && (<img style={{width: '5rem'}} src={voiceActiveIcon} />)} */}
        </Box>
    );
}
